<template>
  <div class="teacher">
    <nav-bar class="nav-bar-position">学习顾问</nav-bar>
    <white-space height="60"/>

    <section
      :style="{ backgroundImage: `url(${imageUrl}/img/bg_teacher@2x.png)` }"
      class="main"
    >
      <div>
        <div class="teacher-name">{{ teacherInfo.name }}</div>
        <my-img :src="teacherInfo.avatar" class="teacher-avatar"/>
      </div>

      <div class="teacher-code">
        <my-img :src="teacherInfo.wechat_code"/>

        <p>微信号：{{ teacherInfo.wechat_name }}</p>

        <div style="position: absolute; left: -33px;">
          <my-button @tap.native="_COPY({ data: teacherInfo.wechat_name })"
          >复制微信号
          </my-button
          >
        </div>
      </div>
    </section>

    <div class="wrap" v-if="show" @tap="hide">
      <navigator target="miniProgram" open-type="exit" >
        <my-img class-name="wx_add_wx" src="wx_add_wx.png"/>
      </navigator>
    </div>

  </div>
</template>

<script>
  import TabBar from "../../component/tab-bar/tab-bar";
  import MyButton from "../../component/my-button/my-button";
  import { COPY } from "../../utils/common";
  import { mapActions, mapState } from "vuex";

  export default {
    name: "teacher",
    components: {
      TabBar,
      MyButton
    },
    data() {
      return {
        imageUrl: this.$imageUrl,
        show: false
      };
    },
    onLoad() {
      this.reqTeachInfo();
    },
    computed: mapState("User", ["teacherInfo"]),
    methods: {
      ...mapActions("User", ["reqTeachInfo"]),
      _COPY({ data }) {
        COPY({ data });
        this.show = true;
      },
      hide() {
        this.show = false;
        // #ifdef APP-PLUS

        if (plus) {
          // 判断平台

          if (plus.os.name === "Android") {
            plus.runtime.launchApplication(
              {
                pname: "com.tencent.mm",
                action: "weixin://"
              },
              function (e) {
                console.log("Open system default browser failed: " + e.message);
              }
            );
          } else if (plus.os.name === "iOS") {
            plus.runtime.launchApplication({ action: "weixin://" }, function (e) {
              console.log("Open system default browser failed: " + e.message);
            });
          }
        } else {

        }
        // #endif
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import "../../uni";

  .teacher {
    @include bg;

    section.main {
      position: relative;
      width: 100vw;
      height: 80vh;
      background: {
        size: 100%;
        position-y: upx(-100);
      }
    }

    &-avatar {
      position: absolute;
      top: upx(170);
      left: 0;
      right: 0;
      margin: auto;
      width: upx(180);
      height: upx(180);
      border-radius: 50%;
      overflow: hidden;
    }

    &-name {
      z-index: 1;
      position: absolute;
      top: upx(160);
      left: calc(50vw + 20px);
      height: upx(56);
      line-height: upx(56);
      padding: 0 upx(20);
      border-radius: upx(28) upx(28) upx(28) 0;
      background: linear-gradient(90deg, #45d7b5 0%, #38acbe 100%);
      @include ft(30, #fff, 300);
    }

    &-code {
      position: absolute;
      top: upx(390);
      left: 0;
      right: 0;
      margin: auto;
      width: upx(336);
      height: upx(336);

      text-align: center;

      p {
        padding: upx(20) 0;
        @include ft(30, #394357, 400);
      }
    }

    .wrap {
      position: absolute;
      top: 0;
      z-index: 999999999999999999999;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.7);
      text-align: center;
      padding-top: upx(340);
    }
  }
</style>
